<!-- 分页  -->
<template>
	<div class="pagination">
		<el-pagination
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
			:current-page="page.current"
			:page-size="page.size"
			:page-sizes="sizes"
			:total="page.total"
			layout="total, sizes, prev, pager, next, jumper"
			>
		</el-pagination>
	</div>
</template>
<script>
export default {
	name: 'pagination',
	data() {
		return {
			page: {
				total: 0,
				current: 0,
				size: 0
			},
			sizes: [100, 200, 300, 400]
		}
	},
	props: {
		total: {
			type: Number,
			default: 400,
		},
		current: {
			type: Number,
			default: 1,
		},
		size: {
			type: Number,
			default: 1,
		},
	},
	watch: {
		total: function(val){
			this.page.total = val;
		},
		current: function(val){
			this.page.current = val;
		},
		size: function(val){
			this.page.size = val;
		},
	},
	methods: {
		// 改变分页数量
		handleSizeChange: function(val) {
			console.log(`每页 ${val} 条`);
		},
		// 跳转分页
		handleCurrentChange: function(val) {
			console.log(`当前页: ${val}`);
		},
		handleChange: function(){
			this.$emit('on-change': {
				total: 0,
				current: 0,
				size: 0
			})
		}
	},
}

</script>
<style scoped></style>
